<template>
  <div class="pointQuery">
    <!-- 搜索框 -->
    <div class="searchTxtb" :id="barShow ? 'Txtb-show' : 'Txtb'">
      <span v-show="barShow">查询距离(m)</span>
      <!-- 输入框 -->
      <input
        type="text"
        v-model="inputValue"
        v-show="barShow"
        placeholder="请输入距离"
      />
      <!-- 搜索按钮 -->
      <div class="button" v-show="barShow">
        <div @click="pointQueryRun" class="searchRun">
          <div class="buttonMask"></div>
          <span>确定</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
/* eslint-disable */
import { getCurrentInstance, onMounted } from "vue";
import pubsub from "pubsub-js";
import axios from "axios";
import L from "leaflet";

import urlList from "@/store/urlList.json";
import normalApi from "@/api/normalApi.js";
import Message from "@/components/Message/showMessage";

export default {
  name: "点选查询距离",
  data() {
    return {
      inputValue: 200,
      subList: [],
      barShow: false,
    };
  },
  setup() {
    const { proxy } = getCurrentInstance();

    let clickPoint;

    // 查询URL
    // let serveURLList;
    // normalApi.getUrlList().then((res) => {
    //   serveURLList = [
    //     res.urlList.addressURL,
    //     res.urlList.courtYardURL,
    //     res.urlList.naturalResourceURL,
    //     res.urlList.roadUrl,
    //     res.urlList.enterpriseURL,
    //   ];
    // });

    let serveURLList = [
      urlList.addressURL,
      urlList.courtYardURL,
      urlList.naturalResourceURL,
      urlList.roadUrl,
      urlList.enterpriseURL,
    ];

    // 查询图层名
    let serveNameList = ["地址", "院落", "自然资源", "道路", "企业"];

    onMounted(() => {
      proxy.subList.push(
        pubsub.subscribe("pointQueryWindowShow", (n, data) => {
          // 控件样式
          proxy.barShow = false;
          data.flag &&
            setTimeout(() => {
              proxy.barShow = true;
            }, 300);
          // 点击坐标存储
          clickPoint = data.clickPoint;
        })
      );
    });

    // 执行点选查询
    async function pointQueryRun() {
      // 关闭弹窗
      proxy.barShow = false;
      // 绘制查询范围
      proxy.inputValue != 0 &&
        pubsub.publish("drawQueryCircle", {
          centerPoint: clickPoint,
          radius: proxy.inputValue,
          flag: true,
        });
      // 制作请求
      let requestList = await makeRequest();
      // 发送请求
      Promise.all(requestList)
        .then((response) => {
          let resultList = [];
          for (let index = 0; index < response.length; index++) {
            // console.log(response[index]);
            // 数据集
            let list = response[index].data.features;
            // 数据集名称
            let title = serveNameList[index];
            // 数据类型
            let type = response[index].data.geometryType;
            // 数据录入
            resultList.push({ list, title, type, seeAllflag: false });
          }
          // console.log(resultList);
          // 信息提示
          Message(
            `查询${
              resultList.length > 0
                ? `成功，共查询到${resultList.length}条数据`
                : `成功，查询距离内无数据`
            }`
          );
          // 隐藏点击标识
          pubsub.publish("deleteMarker", ["highlightMark"]);
          // 结果处理
          requestDataHandle(resultList);
        })
        .catch((error) => {
          Message(`查询失败：${error}`);
        });
    }

    // 发送查询请求
    function makeRequest() {
      let requestList = [];
      serveURLList.forEach((url) => {
        // 设置查询参数
        const params = {
          f: "json", // 返回 JSON 格式数据
          geometry: `{"x":${clickPoint.lng},"y":${clickPoint.lat}}`, // 要查询的点的坐标
          geometryType: "esriGeometryPoint", // 几何类型为点
          spatialRel: "esriSpatialRelIntersects", // 空间关系为相交
          distance: proxy.inputValue, // 查询距离
          units: "esriSRUnit_Meter", // 单位为米
          outFields: "*", // 查询所有字段
        };
        requestList.push(axios.get(url, { params }));
      });

      // 发送 GET 请求
      return requestList;
    }

    // 查询结果处理
    function requestDataHandle(resultList) {
      // console.log(resultList);
      // 查询结果列表显示
      pubsub.publish("queryInfoShow", {
        // 显隐标识
        flag: true,
        // 数据集
        resultList,
      });
    }

    return { pointQueryRun };
  },
  beforeDestroy() {
    this.subList.forEach((element) => {
      pubsub.unsubscribe(element);
    });
  },
  beforeRouteLeave() {
    this.subList.forEach((element) => {
      pubsub.unsubscribe(element);
    });
  },
};
</script>

<style lang="less" scoped>
* {
  border-radius: 5px !important;
}

.searchTxtb {
  background-color: white;
  height: 35px;
  z-index: 9999;
  border-radius: 5px;
  overflow: hidden;
  transition: width 0.3s ease;
  display: flex;
  align-items: center;
  position: relative;
  > span {
    margin-left: 3%;
    min-width: 90px;
  }
  > input {
    width: 38.5%;
    height: 80%;
    padding: 0 5px;
    border-radius: 5px;
    border: #3f69e4 1px solid;
  }

  > .button {
    width: 20%;
    height: 80%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 1%;
    > div {
      width: 100%;
      height: 100%;
      min-width: 50px;
      border-radius: 5px;
      font-family: "黑体";
      font-size: 110%;
      color: #3f69e4;
      transition: color 0.3s ease;
      display: flex;
      justify-content: center;
      align-items: center;
      > .buttonMask {
        position: absolute;
        z-index: 0;
        background-color: #3f69e4;
        top: 0%;
        left: 0%;
        width: 0%;
        height: 100%;
        transition: width 0.3s ease;
      }
      > span {
        position: absolute;
        z-index: 999;
        display: inline-block;
        background-color: transparent;
      }
    }
    > div:hover {
      color: white;
      cursor: pointer;
    }
  }
}

.searchRun:hover > .buttonMask {
  width: 100% !important;
}

#Txtb {
  width: 0px;
}

#Txtb-show {
  width: 250px;
  border: #3f69e4 1px solid;
}
</style>